@extends('admin.layout.app')

@section('title', '公告管理')

@section('content')
    <div class="layui-col-lg12">
        <div class="layui-card">
            <div class="layui-card-header"> 公告管理 </div>
            <div class="layui-card-body">
                <br>
                <form class="layui-form" id="search-form" action="" onsubmit="return false;">
                    <div class="tool-bar layui-form-item">
                        <div class="layui-inline">
                            <select name="state" >
                                <option value="">全部</option>
                                @foreach (($states??[]) as $state=>$state_name)
                                    @if (request('state') != '' && request('state') == $state) <option value="{{$state}}" selected>{{$state_name}}</option>
                                    @else <option value="{{$state}}">{{$state_name}}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>

                        <div class="layui-inline">
                            <input class="layui-input" name="keyword" id="keyword" autocomplete="off" placeholder="输入搜索的关键字">
                        </div>

                        <div class="layui-inline">
                            <div class="layui-btn-group">
                                <button class="layui-btn" data-type="reload" title="搜索">
                                    <i class="layui-icon layui-icon-search"></i>
                                </button>
                                <a  class="layui-btn" href="@broute('notice.edit', [0])" title="发布公告">
                                    <i class="layui-icon layui-icon-add-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </form>

                <table class="layui-hide" id="lst" lay-filter="tb"></table>

                <script type="text/html" id="toolbar">
                    <div class="layui-btn-group">
                        {{--<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" data-type="edit" href="/notice/preview/@{{d.id}}" title="预览">--}}
                            {{--<i class="layui-icon">&#xe615;</i>--}}
                        {{--</a>--}}
                        <a class="layui-btn layui-btn-xs" lay-event="edit" data-type="edit" href="/notice/edit/@{{d.id}}" title="编辑">
                            <i class="layui-icon">&#xe642;</i>
                        </a>
                    </div>
                </script>

                <div class="tool-bar layui-form-item layui-btn-group">
                    <a class="layui-btn layui-btn-danger" data-type="delete">
                        <i class="layui-icon">&#xe640;</i>批量删除
                    </a>
                    <a class="layui-btn layui-btn" data-type="up">
                        <i class="layui-icon">&#xe604;</i>置顶
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
layui.use('table', function(){
    var table = layui.table;

    //方法级渲染
    table.render({
        elem: '#lst'
        , url: "@broute('article.index')"
        , cols: [[
            {checkbox: true}
            , {field:'id', title: 'ID', width:80}
            , {field:'type_name', title: '类型', width:150}
            , {
                title: '标题',
                templet: '<span><a target="_blank" href="{{config('app.urls.www')}}/article/detail?id=@{{ d.id }}&preview=1">@{{ d.color_title }}</a></span>',
            }
            , {field:'state_name', title: '状态', width:150}
            , {field:'admin_name', title: '发布人', width:150}
            , {field:'created_at', title: '创建时间', width:170}
            , {
                title: '有效时间',
                width:340,
                templet: function (d) {
                    return d.start_at+" - "+d.deadline_at;
                }
            }
            , {fixed: 'right', width:100, align:'center', toolbar: '#toolbar'}
        ]]
        , id: 'table'
        , page: true
        , limit: 20
        ,loading: true
    });

    var $ = layui.$, active = {
        reload: function() {
            // 执行重载
            table.reload('table', {
                page: { curr: 1 }
                , where: $('#search-form').serializeJSON()
            });
        },
        delete: function() {
            var checkStatus = table.checkStatus('table')
                , checked = checkStatus.data
                , id = [];
            $.map(checked, function (k, v) {
                id.push(k.id);
            });
            var data = {
                id: id,
            };
            layer.confirm("確定要刪除該公告嗎？", function (e) {
                $.ajax({
                    url: "@broute('notice.delete')",
                    type: 'post',
                    data: data,
                    dataType: 'json',
                    success: function(data) {
                        if (!data.status) {
                            layer.msg(data.message, function(){});
                            return;
                        }
                        layer.msg(data.message);
                        setTimeout(function() {
                            // 刷新列表
                            active['reload'].call(this);
                        }, 1000);
                    },
                    error: function(jqXHR, textStatus) {
                        // 友好提示
                        layer.msg(jqXHR.responseJSON.message || jqXHR.responseText, function() {});
                    }
                });
            });

        },
        up: function() {
            var checkStatus = table.checkStatus('table')
                , checked = checkStatus.data
                , id = [];
            $.map(checked, function (k, v) {
                id.push(k.id);
            });
            var data = {
                id: id,
            };
            $.ajax({
                url: "@broute('notice.up')",
                type: 'post',
                data: data,
                dataType: 'json',
                success: function(data) {
                    if (!data.status) {
                        layer.msg(data.message, function(){});
                        return;
                    }
                    layer.msg(data.message);
                    setTimeout(function() {
                        // 刷新列表
                        active['reload'].call(this);
                    }, 1000);
                },
                error: function(jqXHR, textStatus) {
                    // 友好提示
                    layer.msg(jqXHR.responseJSON.message || jqXHR.responseText, function() {});
                }
            });
        }
    };

    $('.tool-bar .layui-btn, #toolbar a[data-type]').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});
</script>
@endsection
